<template>
  <div class="h-full w-full overflow-hidden">
    <div class="title">
      <span>历史数据波形</span>
    </div>
    <div class="flex h-full px-8">
      <div class="info w-48">
        <div class="info-item">
          <div class="info-item_header">
            <TagFilled />
            <span>数据类型</span>
          </div>
          <div class="info-item_content">
            <p><CalendarFilled /> <span>加速度</span></p>
          </div>
        </div>
        <div class="info-item">
          <div class="info-item_header">
            <BoxPlotFilled />
            <span>通道</span>
          </div>
          <div class="info-item_content">
            <div
              v-for="(item, index) in channels"
              :key="index"
              class="flex items-center"
            >
              <Checkbox v-model:checked="item.checked" />
              <span class="w-18 mx-2">{{ item.name }}-{{ item.des }}</span>
              <div
                class="h-4 w-4"
                :style="{ backgroundColor: item.color }"
              ></div>
            </div>
          </div>
        </div>
        <div class="info-item">
          <div class="info-item_header">
            <SlidersFilled />
            <span>设备</span>
          </div>
          <div class="info-item_content">
            <p>
              <CalendarFilled />
              <span>{{ code }}</span>
            </p>
          </div>
        </div>
      </div>
      <div class="flex flex-1 flex-col overflow-hidden">
        <div class="flex justify-end">
          <Compact>
            <DatePicker
              v-model:value="endTime"
              :value-format="timeFormat"
              :format="timeFormat"
              show-time
              placeholder="结束时间"
              :allow-clear="false"
            ></DatePicker>
            <Select
              class="w-24"
              v-model:value="timeDiff"
              :options="options"
            ></Select>
          </Compact>
        </div>
        <div class="w-full flex-1 overflow-hidden bg-[#103B62]" :id="id"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="tsx">
import { computed, onMounted, reactive, ref, useId, watch } from 'vue';
import { realDataChart } from '@/utils';
import {
  BoxPlotFilled,
  CalendarFilled,
  SlidersFilled,
  TagFilled,
} from '@ant-design/icons-vue';
import { Checkbox, Compact, DatePicker, Select } from 'ant-design-vue';
import dayjs from 'dayjs';
import { fetchHistoryData } from '../api';

interface Props {
  /** 设备标识 */
  code?: string;
  /** 格值 */
  latticeValue?: number;
  /** 烈度 */
  intensity?: number;
  /** 采样率 */
  samplingRate?: number;
}
const {
  code,
  latticeValue = 500,
  intensity = 1,
  samplingRate = 100,
} = defineProps<Props>();

const timeFormat = 'YYYY-MM-DD HH:mm:ss';

const id = useId();
const timeDiff = ref(1);
const options = [
  {
    label: '1分钟',
    value: 1,
  },
  {
    label: '10分钟',
    value: 10,
  },
  {
    label: '30分钟',
    value: 30,
  },
  {
    label: '60分钟',
    value: 60,
  },
];
const endTime = ref(dayjs().format(timeFormat));
const startTime = computed(() => {
  if (endTime.value) {
    return dayjs(endTime.value)
      .subtract(timeDiff.value, 'm')
      .format(timeFormat);
  }
  return '';
});

const channels = ref([
  {
    name: 'EIZ',
    des: '竖桥向',
    color: '#F16995',
    yName: '单位: 度(°)',
    checked: true,
  },
  {
    name: 'EIN',
    des: '横桥向',
    color: '#77E3F9',
    yName: '单位: 度(°)',
    checked: true,
  },
  {
    name: 'EIE',
    des: '纵桥向',
    color: '#DFC428',
    yName: '单位: 度(°)',
    checked: true,
  },
]);

watch([startTime, channels], () => fetchChartData(), {
  deep: true,
});

const spinning = ref(false);
const fetchChartData = async () => {
  if (!startTime.value) return;
  spinning.value = true;
  const res = await fetchHistoryData({
    deviceCode: code,
    startTime: startTime.value,
    endTime: endTime.value,
  });
  const dataSource = {};

  Object.keys(res.data).map((_key) => {
    let key;
    switch (_key) {
      case 'Z':
        key = 'EIZ';
        break;
      case 'N':
        key = 'EIN';
        break;
      case 'E':
        key = 'EIE';
        break;
      default:
        break;
    }
    dataSource[key] = res.data[_key].reduce((prev, cur) => {
      if (cur[0] % 100 === 0) {
        prev.push(cur);
      }
      return prev;
    }, []);
  });
  const { renderChart } = realDataChart({
    target: document.getElementById(id),
    // title: `设备标识：${code} | 采样率：${samplingRate} | 烈度：${intensity}`,
    title: false,
    direction: 'vertical',
    channels: channels.value
      .filter((item) => item.checked)
      .map((cur, index) => {
        return {
          ...cur,
          grid: {
            show: true,
            top: `${30 * index + 5} + %`,
            left: '7%',
            right: '3%',
            height: `${100 / 3 - 10}%`,
            containLabel: true,
          },
        };
      }),
    once: true,
  });
  renderChart(dataSource);
};
onMounted(() => {
  fetchChartData();
});
</script>

<style lang="scss" scoped>
.title {
  color: #fff;
  text-align: center;
  height: 68px;
  background: url('/static/chart/chart-title.png') no-repeat center/ cover;

  span {
    font-size: 32px;
    background: linear-gradient(180deg, #ffffff 26%, #93d5ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.info {
  width: 248px;

  .info-item {
    margin-bottom: 16px;

    &_header {
      width: 100%;
      height: 30px;
      font-size: 18px;
      background: #235691;
      padding: 0 8px;
      span {
        margin-left: 8px;
        font-size: 14px;
      }
    }

    &_content {
      padding: 10px 14px;
      background: linear-gradient(
        180deg,
        rgba(55, 117, 198, 0) 0%,
        rgba(55, 117, 198, 0.4) 100%
      );

      p {
        font-size: 14px;
        span {
          margin-left: 8px;
        }
      }
    }
  }
}
</style>
